<template>
    <div>
        <el-alert title="角色信息更改后将即时生效，无需保存" type="info">
        </el-alert>
        <el-transfer v-model="roles" :data="data" :titles="['角色列表', '已选角色']" :props="{
            key: 'id',
            label: 'label_name'
        }" @change="handleChange"></el-transfer>

        <el-button style="margin-top:10px" type="primary" :loading="roleLoading" @click="rolePosts()">更 换</el-button>
    </div>
</template>
  
<script>
import { getRoles } from '@/api/role'
import { saveRole } from '@/api/personnel'
export default {
    props: {
        roles: [],
        userId: []
    },
    data() {
        return {
            data: [],
            value: [],
            roleLoading: false
        }
    },
    mounted() {
        this.getRole()
        this.value = this.roles
    },
    beforeDestroy() {

    },
    methods: {
        ok(data) {
            this.$emit("ok", data)
        },
        async getRole() {
            const res = await getRoles()
            this.data = res.data
        },
        handleChange(data) {
            this.value = data
        },
        async rolePosts() {
            this.roleLoading = true
            const res = await saveRole({
                user_id: this.userId,
                roles: this.value
            })
            this.roleLoading = false
            this.$message({
                message: '保存成功，即时生效',
                type: 'success'
            });
            this.ok(res.data)
        }
    }
}
</script>
<style lang="scss" scoped>
.el-table-column--selection {
    .cell {
        display: none;
    }
}
</style>
